<template>
  <div class="home">
    <router-view></router-view>
    <van-tabbar  v-model="active">
      <van-tabbar-item replace to="/home/homes">
        <span>首页</span>
        <template #icon="props">
          <img :src="!props.active ? icon.active : icon.inactive" class="img" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/activity">
        <span>活动</span>
        <template #icon="props">
          <img
            :src="!props.active ? activity.active : activity.inactive"
            class="img"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/player">
        <span>潮玩家</span>
        <template #icon="props">
          <img
            :src="!props.active ? player.active : player.inactive"
            class="img"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/my">
        <span>个人</span>
        <template #icon="props">
          <img
            :src="!props.active ? person.active : person.inactive"
            class="img"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import actHome from "../img/home/option/ico-home.png";
import inactHome from "../img/home/dis/ico-home.png";
import activity from "../img/home/option/ico-activity.png";
import inactivity from "../img/home/dis/ico-activity.png";
import actplayer from "../img/home/option/ico-player.png";
import inactplayer from "../img/home/dis/ico-player.png";
import actperson from "../img/home/option/ico-person.png";
import inactperson from "../img/home/dis/ico-person.png";
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: actHome,
        inactive: inactHome,
      },
      activity: {
        active: activity,
        inactive: inactivity,
      },
      player: {
        active: actplayer,
        inactive: inactplayer,
      },
      person: {
        active: actperson,
        inactive: inactperson,
      },
    };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
::v-deep .van-tabbar {
  height: 80px;
  .van-tabbar-item {
    font-size: 24px;
    line-height: 40px;
  }
}

.img {
  // width: 50px;
  // height: 28px;
  transform: scale(2);
}
</style>
